<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    省
    <select name="" id="pro">
        <option value="">请选择</option>
    </select>

    市
    <select name="" id="city">
        <option value="">请选择</option>
    </select>

    区
    <select name="" id="area">
        <option value="">请选择</option>
    </select>


    <script>


        // 请选择  value = ""   省份相当于没选

        //   省份onchange 的时候  要判断 this.value  

        //   filter 







        const oPro = document.querySelector('#pro') ;

        const oCity = document.querySelector('#city') ;

        const oArea = document.querySelector('#area') ;


        const xhr = new XMLHttpRequest();

        xhr.open('get', '../data/city2.json', true);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = xhr.responseText;
                // console.log(data);
                data = JSON.parse(data);
                console.log(data);

                // 显示省份
                let proHTML = '<option value="请选择">请选择</option>' ;
                data.forEach( v => {
                    const { province } = v ;
                    proHTML += `<option value="${province}">${province}</option>` ;
                })
                oPro.innerHTML = proHTML ;

                // 省份选择以后  --- 失去焦点且发生改变
                oPro.onchange = function() {
                    const proVal = this.value ;
                    // 正确的选择了省份
                    // 点击了请选择
                    if(proVal === '请选择') {
                        oCity.innerHTML = '<option value="请选择">请选择</option>' ;
                        oArea.innerHTML = '<option value="请选择">请选择</option>' ;
                    } else {
                        // 拿到省所对应的市
                        const cityArr = data.filter( v => v.province === proVal)[0].children ;
                        console.log(cityArr);   // 数组套对象  

                        let cityHTML = '<option value="请选择">请选择</option>' ;
                        cityArr.forEach( v => {
                            const { city } = v ;
                            cityHTML += `<option value="${city}">${city}</option>` ;
                        })

                        oCity.innerHTML = cityHTML ;

                        // 选择市以后才选择区
                        oCity.onchange = function() {
                            // 拿到选择的市
                            const cityVal = this.value ;
                            // 先判断
                            if(cityVal === '请选择') {
                                oArea.innerHTML = '<option value="请选择">请选择</option>' ;
                            } else {
                                // 拿到对应的区
                                const areaArr = cityArr.filter( v=> v.city === cityVal)[0].children ;
                                console.log(areaArr);
                                let areaHTML = '<option value="请选择">请选择</option>' ;
                                areaArr.forEach( v=> {
                                    areaHTML += `<option value="${v}">${v}</option>` ;
                                })
                                oArea.innerHTML = areaHTML ;
                            }
                        }


                    }
                } 

            }
        }

    </script>

</body>

</html>